<template>
  <el-card class="filter-container" shadow="never">
    <div>
      <i class="el-icon-menu"></i>
      <span>活动列表</span>
    </div>
 <div>
   <el-card class="filter-container" shadow="never">
     <div>
       <i class="el-icon-tickets"></i>
       <span>秒杀活动列表</span>
     </div>
   <div style="margin: 10px">
     <el-input style="width:200px" suffix-icon="el-icon-search" placeholder="请输入名称" v-model="title"></el-input>
     <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
     <el-button type="warning" @click="reset">重置</el-button>
   </div>

   <div style="margin: 10px 0">
     <el-button type="primary" @click="handleAdd">新增<i class="el-icon-circle-plus-outline"></i></el-button>
     <el-popconfirm
         class="ml-5"
         confirm-button-text='确定'
         cancel-button-text='我再想想'
         icon="el-icon-info"
         icon-color="red"
         title="您确定批量删除这些数据吗？"
         @confirm="delBatch"
     >
       <el-button type="danger" slot="reference">批量删除 <i class="el-icon-remove-outline"></i></el-button>
     </el-popconfirm>
   </div>

   <el-table :data="tableData" @selection-change="handleSelectionChange" border>
     <el-table-column type="selection" width="55"></el-table-column>
     <el-table-column prop="id" label="编号" width="60"  align="center">
     </el-table-column>
     <el-table-column prop="title" label="活动标题" width="200" align="center">
     </el-table-column>
     <el-table-column prop="status" label="活动状态"  width="100" align="center">
       <template slot-scope="scope">
          <span v-if="new Date(scope.row.endDate).getTime()<new Date(new Date().toLocaleDateString()).getTime()">
            <div class="status-icon icon1"></div>已结束
         </span>
         <span v-if="new Date(scope.row.startDate).getTime()>new Date(new Date().toLocaleDateString()).getTime()">
            <div class="status-icon icon1"></div>未开始
          </span>
         <span v-if="new Date(scope.row.startDate).getTime()<new Date(new Date().toLocaleDateString()).getTime()
                     &&
                     new Date(scope.row.endDate).getTime()>new Date(new Date().toLocaleDateString()).getTime()">
            <div class="status-icon icon1"></div>进行中
          </span>
       </template>
     </el-table-column>
     <el-table-column prop="startDate" label="开始时间" align="center">
     </el-table-column>
     <el-table-column prop="endDate" label="结束时间" align="center">
     </el-table-column>
     <el-table-column label="上线/下线" prop="status"  width="80" align="center">
       <template slot-scope="scope">
         <el-switch
             v-model="scope.row.status"
             :active-value="1"
             :inactive-value="0"
             @change="changeSwitch(scope.row.id)"/>
       </template>
     </el-table-column>
     <el-table-column label="操作" align="center">
       <template slot-scope="scope">
         <el-button type="primary" @click="handleDetail(scope.row.id)">设置商品</el-button>
         <el-button type="success" @click = "handleEdit(scope.row)">编辑</el-button>
         <el-popconfirm
             class="ml-5"
             confirm-button-text='确定'
             cancel-button-text='我再想想'
             icon="el-icon-info"
             icon-color="red"
             title="您确定删除吗？"
             @confirm="handleDel(scope.row.id)"
         >
           <el-button type="danger" slot="reference">删除</el-button>
         </el-popconfirm>
       </template>>
     </el-table-column>
   </el-table>

   <div style="padding: 10px 0">
     <el-pagination
         :page-sizes="[5,10,15,20]"
         :page-size="pageSize"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="pageNum"
         layout="total, sizes, prev, pager, next, jumper"
         :total="total">
     </el-pagination>
   </div>
   </el-card>

   <el-dialog title="秒杀活动信息" :visible.sync="dialogFormVisible" width="30%">
     <el-form label-width="80px" size="small">
       <el-form-item label="活动标题" prop="title">
         <el-input v-model="form.title" autocomplete="off"></el-input>
       </el-form-item>
       <el-form-item label="活动状态">
         <template>
           <el-radio v-model="form.status" label="1">上线</el-radio>
           <el-radio v-model="form.status" label="0">下线</el-radio>
         </template>
       </el-form-item>
       <el-form-item label="开始时间" prop="start">
       <el-date-picker
           v-model="form.startDate"
           value-format="yyyy-MM-dd"
           type="date"
           :picker-options="pickerOptions0"
       ></el-date-picker>
       </el-form-item>
       <el-form-item label="结束时间" prop="end">
         <el-date-picker
             v-model="form.endDate"
             value-format="yyyy-MM-dd"
             type="date"
             :picker-options="pickerOptions1"
         ></el-date-picker>
       </el-form-item>
     </el-form>
     <div slot="footer" class="dialog-footer">
       <el-button @click="dialogFormVisible = false">取 消</el-button>
       <el-button type="primary" @click="save">确 定</el-button>
     </div>
   </el-dialog>

   <el-dialog title="秒杀时间段选择" :visible.sync="dialogVisible">
     <el-table :data="tableData1"  border>
       <el-table-column prop="id" label="编号" width="45" align="center">
       </el-table-column>
       <el-table-column prop="name" label="秒杀时间段名称" width="120" align="center">
       </el-table-column>
       <el-table-column prop="startTime" label="每日开始时间" width="100" align="center">
       </el-table-column>
       <el-table-column prop="endTime" label="每日结束时间" width="100" align="center">
       </el-table-column>
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
           <el-button type="success" @click = "editProduct(scope.row.id)">商品列表</el-button>
         </template>>
       </el-table-column>
     </el-table>
   </el-dialog>

   <el-dialog title="秒杀商品列表" :visible.sync="dialogVisible1" width="80%">
     <el-button type="primary" @click="addProduct">添加商品<i class="el-icon-circle-plus-outline"></i></el-button>
     <el-table :data="tableData2" border>
       <el-table-column prop="id" label="编号" width="60" align="center">
       </el-table-column>
       <el-table-column prop="name" label="商品名称" width="120" align="center">
       </el-table-column>
       <el-table-column prop="productSn" label="货号" width="120" align="center">
       </el-table-column>
       <el-table-column prop="price" label="商品价格" width="120" align="center">
       </el-table-column>
       <el-table-column prop="stock" label="剩余数量" width="120" align="center">
       </el-table-column>
       <el-table-column prop="promotionPrice" label="秒杀价格" width="120" align="center">
       </el-table-column>
       <el-table-column prop="promotionCount" label="秒杀数量" width="120" align="center">
       </el-table-column>
       <el-table-column prop="promotionLimit" label="限购数量" width="120" align="center">
       </el-table-column>
       <el-table-column prop="sort" label="排序" width="120" align="center">
       </el-table-column>
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
           <el-button type="success" @click = "handleEdit1(scope.row)">编辑</el-button>
           <el-popconfirm
               class="ml-5"
               confirm-button-text='确定'
               cancel-button-text='我再想想'
               icon="el-icon-info"
               icon-color="red"
               title="您确定删除吗？"
               @confirm="handleDel1(scope.row.id)"
           >
             <el-button type="danger" slot="reference">删除</el-button>
           </el-popconfirm>
         </template>>
       </el-table-column>
     </el-table>
   </el-dialog>

   <el-dialog title="编辑秒杀商品信息" :visible.sync="dialogVisible2" width="30%">
     <el-form label-width="80px" size="small">
       <el-form-item label="商品名称" prop="name">
         <span>{{form.name}}</span>
       </el-form-item>
       <el-form-item label="货号" prop="productSn">
         <span>NO.{{form.productSn}}</span>
       </el-form-item>
       <el-form-item label="商品价格" prop="price">
         <span>￥{{form.price}}</span>
       </el-form-item>
       <el-form-item label="秒杀价格" prop="promotionPrice">
         <el-input v-model="form.promotionPrice" autocomplete="off"></el-input>
       </el-form-item>
       <el-form-item label="剩余数量" prop="stock">
         <span>{{form.stock}}</span>
       </el-form-item>
       <el-form-item label="秒杀数量" prop="promotionCount">
         <el-input v-model="form.promotionCount" autocomplete="off"></el-input>
       </el-form-item>
       <el-form-item label="限购数量" prop="promotionLimit">
         <el-input v-model="form.promotionLimit" autocomplete="off"></el-input>
       </el-form-item>
       <el-form-item label="排序" prop="sort">
         <el-input v-model="form.sort" autocomplete="off"></el-input>
       </el-form-item>
     </el-form>
     <div slot="footer" class="dialog-footer">
       <el-button @click="dialogVisible2 = false">取 消</el-button>
       <el-button type="primary" @click="commitEdit()">确 定</el-button>
     </div>
   </el-dialog>

   <el-dialog title="选择商品" :visible.sync="dialogVisible3" width="70%">

     <el-table ref="productTable"
               :data="list"
               style="width: 100%"
               @selection-change="handleSelectionChange"
               v-loading="listLoading"
               border>
       <el-table-column type="selection" width="60" align="center"></el-table-column>
       <el-table-column label="编号" width="100" align="center">
         <template slot-scope="scope">{{scope.row.id}}</template>
       </el-table-column>
       <el-table-column label="商品名称" align="center">
         <template slot-scope="scope">
           <p>{{scope.row.name}}</p>
         </template>
       </el-table-column>
       <el-table-column label="货号" align="center">
         <template slot-scope="scope">
           <p>{{scope.row.productSn}}</p>
         </template>
       </el-table-column>
       <el-table-column label="价格" align="center">
         <template slot-scope="scope">
           <p>￥{{scope.row.price}}</p>
         </template>
       </el-table-column>
     </el-table>

     <div class="pagination-container">
       <el-pagination
           background
           @size-change="handleSizeChange1"
           @current-change="handleCurrentChange1"
           layout="total,sizes,prev, pager, next,jumper"
           :page-size="listQuery.pageSize"
           :page-sizes="[5,10,15]"
           :current-page.sync="listQuery.pageNum"
           :total="total1">
       </el-pagination>
     </div>
     <el-button class="r" type="primary" @click="addBatch">确定</el-button>
   </el-dialog>
 </div>
  </el-card>
</template>

<script>
import {
  fetchList,
} from '@/api/product'
import ProductDetail from "@/views/product/ProductDetail";
const defaultListQuery = {
  keyword: null,
  pageNum: 1,
  pageSize: 5,
  publishStatus: null,
  verifyStatus: null,
  productSn: null,
  productCategoryId: null,
  brandId: null
};
export default {
  name: "Activity",
  data(){
    return {
      listQuery: Object.assign({}, defaultListQuery),
      list: null,
      listLoading: true,
      total:0,
      total1:0,
      pageNum:1,
      pageSize:10,
      tableData: [],
      title:"",
      tableData1:[],
      dialogVisible:false,
      dialogFormVisible:false,
      multipleSelection:[],
      form:{},
      promotionId:0,
      tableData2:[],
      sessionId:0,
      dialogVisible1:false,
      dialogVisible2:false,
      dialogVisible3:false,
      pickerOptions0: {
        disabledDate: (time) => {
          return time.getTime() < Date.now()
        }
      },
      pickerOptions1: {
        disabledDate: (time) => {
          let beginDateVal = this.form.startDate;
          if (beginDateVal) {
            return (
                time.getTime() <
                new Date(beginDateVal).getTime() - 1 * 24 * 60 * 60 * 1000
            );
          }
        }
      }
    }
  },
  created(){
    this.load()
    this.getList();
  },
  methods:{
    load(){
      //请求查询数据
      this.request.get("/spikeActivities/page",{
        params:{
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          title:this.title
        }
      }).then(res =>{
        console.log(res)
        this.tableData = res.records
        this.total = res.total
      })
    },
    getList() {
      this.listLoading = true;
      fetchList(this.listQuery).then(response => {
        this.listLoading = false;
        this.list = response.data.list;
        this.total1 = response.data.total;
      });
    },
    addBatch(){
      if (this.multipleSelection < 1) {
        this.$message({
          message: '请选择一条记录',
          type: 'warning',
          duration: 1000
        });
        return;
      }
      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.request.get("/spikeCommodities/addlist",
            {
              params:{
                id:this.multipleSelection[i].id,
                sessionId: this.sessionId,
                promotionId: this.promotionId

              }
            }).then(res=>{
          if(res){
            this.$message.success("批量添加成功")
            this.dialogVisible3=false
            this.editProduct(this.sessionId)
          }else{
            this.$message.error("批量添加失败")
            this.dialogVisible3=false
            this.editProduct(this.sessionId)
          }
        })
      }
    },
    handleSizeChange1(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange1(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum)
      this.pageNum = pageNum
      this.load()
    },
    handleAdd(){
      this.dialogFormVisible = true
      this.form = {}
    },
    save(){
      this.request.post("/spikeActivities",this.form).then(res=>{
        if(res.code == 20011||res.code==20031){
          this.$message.success("保存成功")
          this.dialogFormVisible = false
          this.load()
        }else{
          this.$message.error("保存失败,请确认时间")
          this.dialogFormVisible = false
        }
      })
    },
    addProduct(){
      this.dialogVisible3 =true
    },
    commitEdit(){
      this.request.post("/spikeCommodities",this.form).then(res=>{
        if(res.code == 20011||res.code==20031){
          this.$message.success("保存成功")
          this.dialogVisible2 = false
          this.editProduct(this.sessionId)
        }else{
          this.$message.error("保存失败,请确认时间")
          this.dialogVisible2 = false
        }
      })
    },
    handleEdit(row){
      this.form = row
      this.dialogFormVisible = true
      this.load()
    },
    handleEdit1(row){
      this.form = row
      this.dialogVisible2 = true
    },
    handleDel(id){
      this.request.delete("/spikeActivities/"+id).then(res=>{
        if(res){
          this.$message.success("删除成功")
          this.load()
        }else{
          this.$message.error("删除失败")
        }
      })
    },
    handleDel1(id){
      this.request.delete("/spikeCommodities/"+id).then(res=>{
        if(res){
          this.$message.success("删除成功")
          this.editProduct(this.sessionId)
        }else{
          this.$message.error("删除失败")
        }
      })
    },
    handleSelectionChange(val){
      this.multipleSelection = val
    },
    delBatch(){
      let ids = this.multipleSelection.map(v => v.id)
      this.request.post("/spikeActivities/del/batch",ids).then(res=>{
        if(res){
          this.$message.success("批量删除成功")
          this.load()
        }else{
          this.$message.error("批量删除失败")
          this.load()
        }
      })
    },
    reset() {
      this.title = ""
      this.load()
    },
    changeSwitch(id){
      this.request.put("/spikeActivities/"+id).then(res=>{
        if(res.code == 20011||res.code==20031){
          this.$message.success("修改成功")
          this.load()
        }else{
          this.$message.error("修改失败,请确认时间")
        }
      })
    },
    handleDetail(id){
      this.promotionId = id,
      this.request.get("/spikeSessions",{
      }).then(res =>{
        this.tableData1 = res.data
        this.dialogVisible = true
      })
    },
    editProduct(id){
      this.sessionId = id
      this.request.get("/spikeCommodities/list",{
        params:{
          promotionId:this.promotionId,
          sessionId:this.sessionId
        }
      }).then(res =>{
        console.log(res)
        this.tableData2 = res.data
        this.dialogVisible1 = true
      })
    }
  }
}
</script>

<style>
.headerBg {
  background: #eee!important;
}
.r{
  position:absolute;
  right:5px;
  bottom:5px;
}
</style>